<!DOCTYPE html>
<html>

<head>
    <title>password_gen</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/material-icons@0.3.1/iconfont/material-icons.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/materialize-css@1.0.0/dist/css/materialize.min.css">
    <script src="https://cdn.jsdelivr.net/npm/materialize-css@1.0.0/dist/js/materialize.min.js"></script>
</head>

<body>

    <div class="container">
        <nav>
            <div class="nav-wrapper teal">
                <span class="brand-logo center">password_gen</span>
            </div>
        </nav>
        <div class="row">
            <div class="col s8 offset-s2 center">
                <div class="input-field">
                    <input type="password" data-bind="value: primary">
                    <label>主密码</label>
                </div>
                <div class="input-field">
                    <input type="text" data-bind="value: distin">
                    <label>分密码</label>
                </div>
                <button class="waves-effect waves-light btn" data-bind="click: generate">生成</button>
                <div class="input-field">
                    <input class="center" type="text" data-bind="value: result">
                    <label>result</label>
                </div>
                <div class="input-field">
                    <input disabled class="center" type="text" data-bind="value: verify">
                    <label>verify</label>
                </div>
            </div>
        </div>
    </div>

    <script src="main.js"></script>
</body>

</html>